<script lang="ts" setup>
import { ref } from "vue"
import { menuSaveApi } from "@/api/menu"
import { ElMessage } from "element-plus"
import MenuParent from "./menu-parent.vue"
import { useMenuStoreHook } from "@/store/modules/menu"
import { type PageMeta, type Menu } from "@/api/menu/types/menu"
import { permissionAllApi } from "@/api/user/permission"
import { SysPermission } from "@/api/user/type/user"

const menu = ref<Menu>({
  sort: 0,
  menuType: "menu",
  status: true
} as Menu)
const meta = ref<PageMeta>({
  affix: true
} as PageMeta)
const dialog = ref<boolean>(false)
const menuStore = useMenuStoreHook()
const allPermission = ref<SysPermission[]>()

const okSave = () => {
  menuSaveApi({
    menu: menu.value,
    meta: meta.value
  })
    .then(() => {
      ElMessage({
        type: "success",
        message: "新增成功"
      })
      menuStore.allMenu()
    })
    .finally(() => {
      dialog.value = false
    })
}
const okDialog = () => {
  dialog.value = true
}
const fPid = (pid: string) => {
  menu.value.pid = pid
}
/** 权限的搜索 */
const queryPerssions = (query: string, cb: any) => {
  if (allPermission.value && query) {
    const result = allPermission.value.filter((q) => {
      if (q.spec && q.spec.indexOf(query) > -1) return true
      if (q.id && q.id.indexOf(query) > -1) return true
      if (q.method && q.method.indexOf(query) > -1) return true
      if (q.per && q.per.indexOf(query) > -1) return true
      return false
    })
    cb(result)
  }
}
permissionAllApi().then((res) => {
  const { code, body } = res
  if (code === 200) {
    allPermission.value = body
  }
})
</script>

<template>
  <el-form
    v-if="menu && meta && menu.menuType != 'permission'"
    ref="form"
    :model="menu"
    label-width="90px"
    class="menu-info"
  >
    <el-divider content-position="left">
      <el-tag effect="dark" type="danger">菜单信息</el-tag>
    </el-divider>
    <el-form-item label="组件位置">
      <el-input v-model="menu.component" />
    </el-form-item>
    <el-form-item label="组件名称">
      <el-input v-model="menu.name" />
    </el-form-item>
    <el-form-item label="访问URL">
      <el-input v-model="menu.path" />
    </el-form-item>
    <el-form-item label="重定向">
      <el-input v-model="menu.redirect" />
    </el-form-item>
    <el-form-item label="启用状态">
      <el-switch v-model="menu.status" />
    </el-form-item>
    <el-form-item label="父级">
      <MenuParent :menu="menuStore.menus" @fPid="fPid" />
    </el-form-item>
    <el-form-item label="菜单类型">
      <el-select v-model="menu.menuType" placeholder="请选择">
        <el-option v-for="m in ['catalogue', 'menu', 'permission']" :label="m" :key="m" :value="m" />
      </el-select>
    </el-form-item>
    <el-form-item label="排序">
      <el-input v-model="menu.sort" />
    </el-form-item>
    <!-- 菜单元数据 -->
    <el-divider content-position="left">
      <el-tag effect="dark" type="danger">菜单元数据</el-tag>
    </el-divider>
    <el-form-item label="隐藏菜单">
      <el-switch v-model="meta.hidden" />
    </el-form-item>
    <el-form-item label="显示根菜单">
      <el-switch v-model="meta.affix" />
    </el-form-item>
    <el-form-item label="标题">
      <el-input v-model="meta.title" />
    </el-form-item>
    <el-form-item label="菜单图标">
      <el-input v-model="meta.svgIcon" />
    </el-form-item>
    <el-form-item label="角色">
      <el-input />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="okDialog">新 增</el-button>
    </el-form-item>
  </el-form>
  <el-form
    v-if="menu && meta && menu.menuType === 'permission'"
    ref="form"
    :model="menu"
    label-width="90px"
    class="menu-info"
  >
    <el-divider content-position="left">
      <el-tag effect="dark" type="danger">权限信息</el-tag>
    </el-divider>
    <el-form-item label="权限标识">
      <el-autocomplete
        v-model="menu.name"
        :fetch-suggestions="queryPerssions"
        :trigger-on-focus="false"
        placeholder="搜索权限"
        value-key="per"
        clearable
        style="width: 100%"
      >
        <template #default="{ item }">
          <el-text type="primary">{{ item.per }}</el-text>
          <el-text type="info">{{ item.spec }}</el-text>
        </template>
      </el-autocomplete>
    </el-form-item>
    <el-form-item label="启用状态">
      <el-switch v-model="menu.status" />
    </el-form-item>
    <el-form-item label="父级">
      <MenuParent :menu="menuStore.menus" @fPid="fPid" />
    </el-form-item>
    <el-form-item label="菜单类型">
      <el-select v-model="menu.menuType" placeholder="请选择">
        <el-option v-for="m in ['catelogue', 'menu', 'permission']" :label="m" :key="m" :value="m" />
      </el-select>
    </el-form-item>
    <el-form-item label="排序">
      <el-input v-model="menu.sort" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="okDialog">新 增</el-button>
    </el-form-item>
  </el-form>
  <el-empty v-else description="描述文字" />
  <el-dialog title="确认新增？" v-model="dialog">
    <template v-slot:footer>
      <div class="dialog-footer">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button type="primary" @click="okSave">确 认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.menu-info {
  width: 500px;
}
</style>
